<template>
  <div>
    <NormalForm pageTitle="离职继承" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card">
      <!-- 表格 -->
      <div style="padding: 20px 20px 20px 20px">
        <el-table ref="mainTable" v-loading="loading" :data="tableList" style="width: 100%" height="415">
          <el-table-column label="员工姓名" align="center" prop="userName" show-overflow-tooltip></el-table-column>
          <el-table-column label="待分配客户数" align="center" prop="customerCount" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="手机" align="center" prop="mobile" show-overflow-tooltip width="160px" />
          <el-table-column label="待分配群聊数" align="center" prop="groupCount" show-overflow-tooltip></el-table-column>
          <el-table-column label="离职时间" align="center" prop="dimissionTime" width="160px">
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <el-button v-hasPermi="['resign:inherit:extend']"
                  :disabled="row.groupCount === 0 && row.customerCount === 0" type="text"
                  @click="inherit(row)">离职继承</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
          @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
    <!-- 离职继承弹窗 -->
    <el-dialog :title="remark" :visible.sync="modifyVisible" width="520">
      <span v-if="customerNumber > 0" style="font-size: 16px; margin-left: 25px">
        已选中{{ customerList }}，共计{{ customerNumber }}个客户
      </span>
      <el-form :model="modifyForm" :rules="rules" ref="modifyForm" style="margin-top: 15px">
        <el-form-item label="继承至" prop="reassign" label-width="90px">
          <el-select filterable v-model="modifyForm.reassign" placeholder="请选择转派员工" style="width: 70%">
            <el-option v-for="item in memberOption" :key="item.userId" :label="item.userName" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接替文案" prop="text" label-width="90px">
          <el-input type="textarea" v-model="modifyForm.text" maxlength="100" show-word-limit placeholder="请输入"
            clearable />
        </el-form-item>
      </el-form>
      <span style="font-size: 13px; color: #c3c3c3; margin-left: 25px">
        注：转派前请您与该客户的负责人沟通后操作哦！
      </span>
      <div slot="footer">
        <el-button @click="cancelModify">取 消</el-button>
        <el-button type="primary" @click="saveModify" :loading="saveLoading">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryTaskList,
  checkCustomer,
  resignInherit,
  switchStaff,
  searchStaffname,
} from "@/api/customerInherit/quitInherit";

export default {
  name: "quitInherit",
  data() {
    return {
      queryForm: {
        phoneNumber: null,
        userName: null,
        dateRange: null,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '手机号',
          value: '',
          prop: 'phoneNumber',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '员工姓名',
          value: '',
          prop: 'userName',
          type: 'SELECT',
          emunName: 'stafLlist',
        },
        {
          label: '离职',
          value: '',
          prop: 'dateRange',
          type: 'DATE_RANGE',
          emunName: ''
        },
      ],
      enumOpt: {
        stafLlist: [],
      },
      total: 0,
      loading: false,
      tableList: [],
      memberOption: [],
      customerList: "",
      customerNumber: 0,
      remark: "离职继承",
      modifyForm: {
        line: "",
        platform: "",
        source: "",
      },
      saveLoading: false,
      modifyVisible: false,
      rules: {
        reassign: [
          { required: true, message: "请选择转派员工", trigger: "change" },
        ],
      },
      rowContent: null,
    };
  },
  mounted() {
    // 员工姓名
    searchStaffname().then((res) => {
      res.data.forEach(item => {
        this.enumOpt.stafLlist.push({
          distLabel: item.userName,
          dictValue: item.userId
        })
      })
    });
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryTaskListFn()
    },
    // 远程搜索任务名称 + 搜索
    queryTaskListFn() {
      this.loading = true;
      let obj = {
        mobile: this.queryForm.mobile,
        userName: this.queryForm.userName,
        startTime: this.queryForm.dateRange?.[0],
        endTime: this.queryForm.dateRange?.[1],
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      };
      queryTaskList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || []
          this.total = res.total || 0
          if (res.rows.length === 0) {
            this.$message.success("查询数据为空");
          }
        }
        this.loading = false;
      });
    },
    // 重置
    handleReset() {
      this.queryForm = {
        phoneNumber: null,
        userName: null,
        dateRange: null,
        pageNum: 1,
        pageSize: 20,
      };
      this.queryTaskListFn();
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryTaskListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryTaskListFn()
    },

    // 创建来源
    inherit(row) {
      // this.customerList = row.name;
      this.customerNumber = row.customerCount;
      if (this.customerNumber > 0) {
        // 选中客户
        checkCustomer({ resignId: row.userId }).then((res) => {
          if (res.data && res.data.length > 2) {
            this.customerList = res.data[0] + "、" + res.data[1] + "等";
          } else if (res.data && res.data.length === 2) {
            this.customerList = res.data[0] + "、" + res.data[1];
          } else {
            this.customerList = res.data[0];
          }
        });
      }
      // 转派员工
      switchStaff().then((res) => {
        this.memberOption = res.data;
      });
      this.rowContent = row;
      this.modifyVisible = true;
    },

    saveModify() {
      this.$refs.modifyForm.validate((valid) => {
        if (valid) {
          const params = {
            inheritorId: this.modifyForm.reassign,
            inheritorName: "",
            copywriter: this.modifyForm.text,
            resignId: this.rowContent.userId,
            resignName: this.rowContent.userName,
            customerCount: this.rowContent.customerCount,
            mobile: this.rowContent.mobile,
            groupCount: this.rowContent.groupCount,
            dimissionTime: this.rowContent.dimissionTime,
          };
          if (this.modifyForm.reassign) {
            this.memberOption.forEach((val) => {
              if (val.userId === this.modifyForm.reassign) {
                params.inheritorName = val.userName;
              }
            });
          }
          resignInherit(params)
            .then((res) => {
              this.saveLoading = false;
              if (res.code === 200) {
                this.$message.success("离职继承成功！");
                this.queryTaskListFn();
                this.modifyVisible = false;
                this.$refs.modifyForm.resetFields();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.saveLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    cancelModify() {
      this.modifyVisible = false;
      this.$refs.modifyForm.resetFields();
    },
  },
};
</script>


<style lang='scss' scoped>
@import "../../../styles/base.scss";
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}
</style>
